import React from 'react';
import { Modal } from 'antd'
import SearchArea from "components/search-area";
import moment from "components/list-selector";
import {getSearchForm, messages } from "share/common";

class FilterConfig extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      filterItems: [],
      searchForm: getSearchForm(props.source.searchParams)
    };
  }

  search = params => {
    let filterItem = [];
    const { searchForm } = this.state;
    let valueFormat = function(valueId, type, labelKey){
      if(!params[valueId]) return null;
      switch(type){
        case "date":
        case "rangePicker":
        case "datePicker": {
          return moment(params[valueId]).format("YYYY-MM-DD");
        }
        case "year":
          return moment(params[valueId]).format("YYYY");
        case "month":
          return moment(params[valueId]).format("YYYY-MM");
        case "combobox":
        case "select":
        case "value_list":
        case "multiple":
          return params[`${valueId}Option`].map(i => i.label).join(",");
        case "list":
        case "searcher":
          return params[`${valueId}ShowValue`].map(i => i[labelKey]).join(",");
        case "selector":
          params[valueId] = params[valueId][valueId];
          return params[`${valueId}Label`];
        default:
          return params[valueId] instanceof Array ? params[valueId].join(",") : params[valueId];
      }
    };
    searchForm.map(item => {
      if(item.type === "items"){
        item.items.map(i => {
          filterItem.push({
            id: i.id,
            label: i.label,
            checked: true,
            value: valueFormat(i.id, i.type),
            valueOid: params[i.id]
          })
        })
      }else{
        filterItem.push({
          id: item.id,
          label: item.label,
          checked: true,
          value: valueFormat(item.id, item.type, item.labelKey),
          valueOid: params[item.id]
        })
      }
    });
    this.setState({
      page: 0,
      filterItems: filterItem,
      searchParams: params,
      loading: true
    }, () => {
      this.props.onChange(this.state.filterItems, this.state.searchParams);
      this.props.onClose();
    });
  };

  clear = () => {
    this.setState({
      searchParams: {},
      filterItems: [],
      page: 0
    }, () => this.props.onChange(this.state.filterItems, this.state.searchParams));
  };

  render() {
    const { source, onClose, visible } = this.props;
    let searchForm = getSearchForm(source.searchParams);
    return (
      <Modal visible={visible}
             width={800}
             onCancel={() => onClose()}
             footer={null}
             title={messages('components.key869')/*请选择要筛选的数据条件*/}>
        <SearchArea searchForm={searchForm}
                    isReturnLabel={true}
                    submitHandle={this.search}
                    clearHandle={this.clear}/>
      </Modal>
    );
  }
}

FilterConfig.PropTypes = {
  visible: React.PropTypes.bool,
  allColumns: React.PropTypes.array,
  onClose: React.PropTypes.func,
  source: React.PropTypes.object,
  onChange: React.PropTypes.func, //分页、排序、筛选变化时触发
};

export default FilterConfig;
